<template>
  <div class="g-app">手写class继承</div>
</template>
<script lang="ts" setup>
/**
 * 在某网页中，有三种菜单：button menu，select menu，modal menu。

他们的共同特点：

都有 title icon 属性
都有 isDisabled 方法（可直接返回 false）
都有 exec 方法，执行菜单的逻辑
他们的不同点：

button menu，执行 exec 时打印 'hello'
select menu，执行 exec 时返回一个数组 ['item1', 'item2', 'item3']
modal menu，执行 exec 时返回一个 DOM Element <div>modal</div>
请用 ES6 语法写出这三种菜单的 class
 */
class Menu {
  title: string;
  icon: string;

  constructor(title: string, icon: string) {
    this.title = title || "";
    this.icon = icon || "";
  }

  isDisabled(): boolean {
    return false;
  }
}

class buttonMenu extends Menu {
  constructor(title: string, icon: string) {
    super(title, icon); // 调用父类的构造函数
  }

  exec(): void {
    console.log("hello");
  }
}

class selectMenu extends Menu {
  constructor(title: string, icon: string) {
    super(title, icon); // 调用父类的构造函数
  }

  exec(): string[] {
    return ["item1", "item2", "item3"];
  }
}

class modalMenu extends Menu {
  constructor(title: string, icon: string) {
    super(title, icon); // 调用父类的构造函数
  }

  exec(): HTMLElement {
    const div = document.createElement("div");
    div.textContent = "modal";
    return div;
  }
}
</script>
